<template>
  <div class="min-h-screen bg-gray-50">
    <div class="mx-auto max-w-[1440px] px-6 py-8">
      <!-- 顶部操作区 -->
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-4">
          <h1 class="text-2xl font-medium">视频素材管理</h1>
          <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="handleUpload">
            <i class="el-icon-upload mr-1"></i>上传视频
          </el-button>
          <el-button class="!rounded-button whitespace-nowrap">
            <i class="el-icon-link mr-1"></i>路径绑定
          </el-button>
        </div>
        <div class="flex items-center gap-4">
          <div class="relative">
            <el-input
              v-model="searchText"
              placeholder="搜索视频名称、标签"
              class="w-64"
            >
              <i slot="prefix" class="el-icon-search"></i>
            </el-input>
          </div>
          <el-select v-model="sortBy" placeholder="排序方式" class="w-32">
            <el-option label="上传时间" value="uploadTime" />
            <el-option label="使用频率" value="useFrequency" />
          </el-select>
        </div>
      </div>

      <!-- 标签筛选区 -->
      <div class="bg-white rounded-lg p-6 mb-6">
        <div class="space-y-4">
          <div class="flex items-center gap-4">
            <span class="text-gray-500 w-20">产品分类：</span>
            <div class="flex flex-wrap gap-2">
              <el-button
                v-for="tag in productTags"
                :key="tag.id"
                :class="{ 'is-active': selectedProductTags.includes(tag.id) }"
                @click="toggleTag(tag.id, 'product')"
                class="!rounded-button whitespace-nowrap"
              >
                {{ tag.name }}
              </el-button>
            </div>
          </div>
          <div class="flex items-center gap-4">
            <span class="text-gray-500 w-20">内容分类：</span>
            <div class="flex flex-wrap gap-2">
              <el-button
                v-for="tag in contentTags"
                :key="tag.id"
                :class="{ 'is-active': selectedContentTags.includes(tag.id) }"
                @click="toggleTag(tag.id, 'content')"
                class="!rounded-button whitespace-nowrap"
              >
                {{ tag.name }}
              </el-button>
            </div>
          </div>
          <div class="flex items-center gap-4">
            <span class="text-gray-500 w-20">性别分类：</span>
            <div class="flex flex-wrap gap-2">
              <el-button
                v-for="tag in genderTags"
                :key="tag.id"
                :class="{ 'is-active': selectedGenderTags.includes(tag.id) }"
                @click="toggleTag(tag.id, 'gender')"
                class="!rounded-button whitespace-nowrap"
              >
                <i :class="['mr-1', tag.icon]"></i>
                {{ tag.name }}
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 视频网格展示区 -->
      <div class="grid grid-cols-4 gap-6">
        <div
          v-for="video in videos"
          :key="video.id"
          class="bg-white rounded-lg overflow-hidden group relative"
        >
          <div class="relative aspect-video">
            <img
              :src="video.thumbnail"
              class="w-full h-full object-cover"
              :alt="video.title"
            />
            <div class="absolute top-2 right-2">
              <el-dropdown trigger="hover">
                <el-button class="!rounded-button whitespace-nowrap">
                  <i class="el-icon-more"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <i class="el-icon-edit"></i>编辑
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-view"></i>查看
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-delete"></i>删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">
              {{ video.duration }}
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-base font-medium mb-2 truncate">{{ video.title }}</h3>
            <div class="flex items-center justify-between text-sm text-gray-500 mb-2">
              <span>{{ video.size }}</span>
              <span>{{ video.uploadTime }}</span>
            </div>
            <div class="flex flex-wrap gap-1">
              <el-tag
                v-for="tag in video.tags"
                :key="tag"
                size="small"
                class="!rounded-button whitespace-nowrap"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="flex justify-center mt-8">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :total="total"
          :page-sizes="[12, 24, 36, 48]"
          layout="total, sizes, prev, pager, next"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      sortBy: 'uploadTime',
      currentPage: 1,
      pageSize: 12,
      total: 100,

      productTags: [
        { id: 1, name: '手机' },
        { id: 2, name: '电脑' },
        { id: 3, name: '平板' },
        { id: 4, name: '智能穿戴' },
        { id: 5, name: '智能家居' }
      ],

      contentTags: [
        { id: 1, name: '产品讲解' },
        { id: 2, name: '功能演示' },
        { id: 3, name: '使用教程' },
        { id: 4, name: '开箱评测' }
      ],

      genderTags: [
        { id: 1, name: '男性', icon: 'el-icon-male' },
        { id: 2, name: '女性', icon: 'el-icon-female' },
        { id: 3, name: '通用', icon: 'el-icon-user' }
      ],

      selectedProductTags: [],
      selectedContentTags: [],
      selectedGenderTags: [],

      videos: [
        {
          id: 1,
          title: '新品 XPhone 15 Pro Max 详细功能展示',
          thumbnail: 'https://ai-public.mastergo.com/ai/img_res/a1b652508273aa2ec2ad500e51038477.jpg',
          duration: '05:32',
          size: '125MB',
          uploadTime: '2024-01-15',
          tags: ['手机', '产品讲解', '新品']
        },
        {
          id: 2,
          title: 'XBook Air 2024 开箱体验',
          thumbnail: 'https://ai-public.mastergo.com/ai/img_res/3f15bf99d3bb736ba90ac9d571c03b53.jpg',
          duration: '08:15',
          size: '256MB',
          uploadTime: '2024-01-14',
          tags: ['电脑', '开箱评测']
        },
        {
          id: 3,
          title: 'XPad Mini 6 使用技巧大全',
          thumbnail: 'https://ai-public.mastergo.com/ai/img_res/71334b1f304ac2a3ce306e936987b272.jpg',
          duration: '12:45',
          size: '320MB',
          uploadTime: '2024-01-13',
          tags: ['平板', '使用教程']
        },
        {
          id: 4,
          title: 'XWatch Series 9 健康监测功能详解',
          thumbnail: 'https://ai-public.mastergo.com/ai/img_res/820fa7df2e4f9406cdd37961734a4630.jpg',
          duration: '06:20',
          size: '180MB',
          uploadTime: '2024-01-12',
          tags: ['智能穿戴', '功能演示']
        }
      ]
    };
  },
  methods: {
    toggleTag(tagId, type) {
      const tagMap = {
        product: this.selectedProductTags,
        content: this.selectedContentTags,
        gender: this.selectedGenderTags
      };

      const index = tagMap[type].indexOf(tagId);
      if (index === -1) {
        tagMap[type].push(tagId);
      } else {
        tagMap[type].splice(index, 1);
      }
    },
    handleUpload() {
      // 处理上传逻辑
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    handleSizeChange(size) {
      this.pageSize = size;
    }
  }
};
</script>

<style scoped>
.el-button.is-active {
  color: #409EFF;
  background-color: #ecf5ff;
  border-color: #b3d8ff;
}

.el-input {
  --el-input-inner-height: 40px;
}

.el-select {
  --el-select-input-focus-border-color: #409EFF;
}
</style>